<template>
  <div class="component-teamCalc">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>{{title}}
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="component-main-left">
        <div class="box1">
          <span class="iconfont">&#xe67e;</span>
          <span>基本信息</span>
          <div class="arrow"></div>
        </div>
      </div>
      <div class="component-main-right">
        <div class="box senInfo">
          <el-form
            :model="info"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="项目部名称:" prop="orgName">
              <el-input v-model="info.orgName"></el-input>
            </el-form-item>
            <el-form-item label="项目部区域:" prop="workarea">
              <el-cascader
                :options="options"
                v-model="info.workarea"
                style="width:326px;"
                class="wd400"
                >
              </el-cascader>
            </el-form-item>
            <el-form-item label="项目负责人:" prop="leaderName">
              <el-input v-model="info.leaderName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import area from '@/assets/js/area.js'
  export default {
    name:"teamCalc",
    data(){
      return {
        title:'添加项目部',
        info:{
          orgName:'',
           workarea: ["", "",""], //省市区
          leaderName:''
        },
        rules: {
          orgName: [
            { required: true, message: "请输入项目名称", trigger: "blur" },
          ],
          leaderName:[
            { required: true, message: "请输入项目负责人", trigger: "blur" },
          ],
          workarea:[
            { type:"array", required: true, message: "请选择区域", trigger: "blur" },
          ]
        },
        checkList:[],//选中列表
        options:area, //省市区
        orgId:''
       
      };
    },
    created(){
      if(this.$route.params.flag == 1){
        this.title = "编辑项目部";
        let params = this.$route.params.info;
        this.info = this.deepClone(params);
        this.info.workarea = [params.orgProvince,params.orgCity,params.orgArea]
        this.orgId = this.$route.params?this.$route.params.info.orgId:''
        console.log(this.$route.params)
      }else{
        this.info = {};
        this.title = "添加项目部";
      }
    },
    activated(){
    
    },
    methods:{
      getArea(value, selectedData) {
        const areaName = selectedData.map(item => item.label)
        this.args = [...areaName]
      },
      submitForm(formName){
        this.$refs[formName].validate(valid => {
          if (valid) {
            let that = this,
            suCb = res => {
              if(res.data.flag==1){
                console.log('成功信息',res)
                that.$msg('操作成功！')
                that.$router.go(-1)
              }else{
                console.log('失败信息',res)
                that.$msg('该部门名称已存在！')
              }
            },
            erCb = res => {
              console.log(res)
            },
            req = {
              url:"/api/web/sysOrg/addOrgPro",
              methods:"post",
              data:{
                orgName:that.info.orgName,
                leaderName:that.info.leaderName,
                orgProvince:that.info.workarea[0],
                orgCity:that.info.workarea[1],
                orgArea:that.info.workarea[2],
                orgId:that.orgId
              },
              success:suCb,
              error:erCb
            };
            console.log('提交部门参数',req.data)
            that.$https(req)
          } else {
            console.log("error submit!!");
            return false;
          }})
      }
    }
  }
</script>

<style scoped>
  .main{
    overflow: hidden;
    width: 1100px;
    margin: 0 auto;
    border: 1px solid #e4e4e4;
    border-left:none;
    border-top: none;
  }
  .component-main-left {
    width: 180px;
    border: 1px solid #e4e4e4;
    padding-top: 50px;
    float: left;
    height: 600px;
    border-top: none;
    border-bottom: none;
  }
  .box1 {
    position: relative;
    width: 175px;
    height: 50px;
    text-align: left;
    line-height: 50px;
    background-color: #9ea7b4;
    color: #fff;
    padding-left: 5px;
  }
  .box1 .arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: -40px;
    left: 180px;
    border-width: 25px 0 25px 25px;
    border-style: solid;
    border-color: transparent transparent transparent #9ea7b4; /*透明 透明 透明 灰*/
    margin: 40px auto;
  }
  .component-main-right{
    float: left;
  }
  .box{
    margin-left: 120px;
    margin-top: 80px;
    outline: none;
  }
  .el-button--primary{
    background-color: #1ABC9C;
    border-color: #1ABC9C;
  }

</style>
